<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>项目管理</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/projectMange.css">
    <style>
        .load-tip {
            height: .666667rem;
            line-height: .666667rem;
            display: flex;
            justify-content: space-between;
            margin: .266667rem;
            padding: .8rem;
        }

        .load-tip p {
            width: 1.333333rem;
            height: .026667rem;
            background-color: #999999;
            margin: 10px;
            /* margin-top: .133333rem; */
        }
    </style>
</head>

<body>
    <div class="top-navigation">
        <img class="arrow" onclick="backIndex()" src="img/arrow.png" alt="图片加载中">
        <h3>项目管理</h3>
        <img class="search" src="img/search.png" alt="图片加载中">
    </div>
    <!-- 搜索界面 -->
    <div class="fades" hidden></div>
    <div class="bottom-modal" hidden>
        <div class="modal-wrapper">
            <div class="modals-title">
                <p style="opacity: 0;"></p>
                <h3>条件搜索</h3>
                <h5 class="clearForm">清空</h5>
            </div>
            <form class="forms">
                <input type="text" placeholder="请输入搜索内容">
                <div class="input-container">
                    <div>
                        <h3> 进度分类</h3>
                        <select name="" id="" placeholder="点击选择">
                            <option value="">点击选择</option>
                            <option value="">已完成</option>
                            <option value="">已审核</option>
                        </select>
                    </div>
                    <div>
                        <h3> 行业分类</h3>
                        <select name="" id="" placeholder="点击选择">
                            <option value="">点击选择</option>
                            <option value="">农业</option>
                            <option value="">工业</option>
                        </select>
                    </div>
                </div>
                <div class="input-container">
                    <div>
                        <h3>项目分类</h3>
                        <select name="" id="" placeholder="点击选择">
                            <option value="">点击选择</option>
                            <option value="">大项目</option>
                            <option value="">好项目</option>
                        </select>
                    </div>
                    <div>
                        <h3> 行业分类</h3>
                        <select name="" id="" placeholder="点击选择">
                            <option value="">点击选择</option>
                            <option value="">农业局</option>
                            <option value="">林业局</option>
                        </select>
                    </div>
                </div>
            </form>
            <button id="search-btn">搜索</button>
        </div>
    </div>

    <!-- 切换tab页 -->
    <ul class="tab-content">
        <li class="active">全部</li>
        <li>已开工</li>
        <li>进行中</li>
        <li>已暂停</li>
        <li>未审核</li>
    </ul>

    <!-- 全部项目 -->
    <div class="all-project">
        <!-- <div class="project-item">
            <h3>1</h3>
            <div>
                <div class="first-row">
                    <p class="title hidden-font">赤锡郑侨文化公园1111111</p>
                    <p class="name">审核通过</p>
                </div>
                <div class="second-row">
                    <p class="depart hidden-font">永泰县住房和城乡建设局11111111</p>
                </div>
            </div>
        </div> -->
    </div>

    <div class="containers" hidden>

    </div>

    <div id="load" style="display: none;">
        <div class="load-tip">
            <p></p>
            <h3>点击加载更多</h3>
            <p></p>
        </div>
    </div>






    <script src="js/flexible.js"></script>
    <script src="js/jquery-3.2.1.js"></script>
    <!-- VConsole手机调试 -->
    <!-- <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script> -->
    <script>
        // var vConsole = new VConsole();

        // 切换tab
        function changeTba(that, id) {
            $(".tab-content>li").removeClass("active");
            $(that).addClass('active')
            if (id == 1) {
                $(".all-project").show(100)
                $(".finish-project").hide(100)
                $(".audit-project").hide(100)
                $(".noaudit-project").hide(100)
                $(".stop-project").hide(100)
            } else if (id == 2) {
                $(".all-project").hide(100)
                $(".finish-project").show(100)
                $(".audit-project").hide(100)
                $(".noaudit-project").hide(100)
                $(".stop-project").hide(100)
            } else if (id == 3) {
                $(".all-project").hide(100)
                $(".finish-project").hide(100)
                $(".audit-project").show(100)
                $(".noaudit-project").hide(100)
                $(".stop-project").hide(100)
            } else if (id == 4) {
                $(".all-project").hide(100)
                $(".finish-project").hide(100)
                $(".audit-project").hide(100)
                $(".noaudit-project").show(100)
                $(".stop-project").hide(100)
            } else {
                $(".all-project").hide(100)
                $(".finish-project").hide(100)
                $(".audit-project").hide(100)
                $(".noaudit-project").hide(100)
                $(".stop-project").show(100)
            }
        }

        // 点击项目跳转项目详情
        // $(".project-item").click(function () {
        //     window.location.href = "./projectDetail.html"
        // });

        // 显示模态框
        $(".top-navigation .search").click(function () {
            $(".bottom-modal").fadeIn();
            $(".fades").fadeIn();
        });

        // 关闭模态框
        $(".fades").click(function () {
            closeModal();
        });

        // 关闭模态框function
        function closeModal() {
            $(".bottom-modal").fadeOut();
            $(".fades").fadeOut();
        }
        // 重置form表单
        $(".clearForm").click(function () {
            $(".forms").find('input[type=text],select,input[type=hidden]').each(function () {
                $(this).val('');

            });

        });

        // 提交表单
        $("#search-btn").click(function () {
            var data = $(".forms").serialize();
            console.log(data);
            closeModal();
        });
    </script>

    <!-- 请求数据 -->
    <script>
        $(function () {
            // 切换tab
            $(".tab-content").on("click", "li", function () {
                $("#load").css("display", "none");
                $(this).addClass("active").siblings().removeClass("active");
                var text = $(this).text();
                console.log(text);
                if (text === "全部") {
                    status = "";
                    $(".containers").hide();
                    $(".all-project").show();
                } else if (text === "已开工") {
                    status = "4";
                    $(".containers").show();
                    $(".all-project").hide();
                } else if (text === "已暂停") {
                    status = "6";
                    $(".containers").show();
                    $(".all-project").hide();
                } else if (text === "进行中") {
                    status = "3";
                    $(".containers").show();
                    $(".all-project").hide();
                } else if (text === "未审核") {
                    status = "2";
                    $(".containers").show();
                    $(".all-project").hide();
                }
                num = 0;
                page = 1;
                console.log(status);
                $(".containers").empty();
                $(".all-project").empty();
                loadContent();
            });

            var page = 1; //页数
            var num = 0; //序号
            var status = ""; //"":全部   2：未审核 3:进行中  6：已暂停   4已经开工
            // 获取用户电话号码
            var userPhone = window.AndroidWebView.getUserId();

            loadContent();
            //加载内容
            function loadContent() {
                $.ajax({
                    url: "http://120.78.158.120:8099/zhApp/projectManage/lists",
                    type: "POST",
                    dataType: "json", //返回数据形式为json
                    contentType: 'application/json;charset=UTF-8',
                    data: JSON.stringify({
                        "userPhone": userPhone,
                        "status": status,
                        "projectType": "",
                        "searchWord": "",
                        "paging": {
                            "currentPage": page
                        }

                    }),
                    success: function (res) {
                        console.log(res);
                        if (res.code === "200" && res.data !== undefined) {
                            $("#load").css("display", "block");
                            var item = res.data;
                            var html = "";
                            if (status === "") {
                                for (var i = 0; i < item.length; i++) {
                                    num++
                                    html = '\
                            <div class="project-item">\
                                <h3>' + num + '</h3>\
                                <div>\
                                    <div class="first-row">\
                                        <p class="title hidden-font">' + item[i].name + '</p>\
                                        <p class="name">' + (item[i].status === "2" ? "未审核" : item[i].status === "3" ?
                                            "节点进行中" : item[i].status === "6" ? "已暂停" : item[i]
                                            .status === "4" ? "已开工" : "") +
                                        '</p>\
                                    </div>\
                                    <div class="second-row">\
                                        <p class="depart hidden-font">' + item[i].resDept + '</p>\
                                    </div>\
                                </div>\
                            </div>\
                            ';
                                    $(".all-project").append(html);
                                }
                            } else {
                                for (var i = 0; i < item.length; i++) {
                                    num++
                                    html = '\
                            <div class="project-item">\
                                <h3>' + num + '</h3>\
                                <div>\
                                    <div class="first-row">\
                                        <p class="title hidden-font">' + item[i].name + '</p>\
                                        <p class="name">分管领导</p>\
                                    </div>\
                                    <div class="second-row">\
                                        <p class="depart hidden-font">' + item[i].resDept + '</p>\
                                        <p class="userName">' + item[i].resUser + '</p>\
                                    </div>\
                                </div>\
                            </div>\
                            ';
                                    $(".containers").append(html);
                                }
                            }


                        }

                        if (res.data !== undefined) {

                            $(".load-tip h3").html("点击加载更多");
                        } else {
                            $(".load-tip h3").html("数据已加载完毕");
                        }
                    }
                });
            }


            $(".load-tip").click(function () {
                page++
                console.log(page);
                $(".load-tip h3").html("数据正在加载中");
                loadContent();
            });
        })


        // 返回安卓首页
        function backIndex() {
            window.AndroidWebView.showInfoFromJs()
        }
    </script>
</body>

</html>